<template>
  <div v-loading="loading">
    <div v-show="!showAddConfig" class="config-list">
      <div class="bread-box but20">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item class="btn-green" style=" color: #3DC094;" @click.native="clickPrevStep">处理任务</el-breadcrumb-item>
          <el-breadcrumb-item>产品配置单</el-breadcrumb-item>
        </el-breadcrumb>
        <div>
          <!-- <el-button size="mini" @click="handleBack">取消</el-button> -->
          <el-button type="primary" @click="clickPrevStep">上一步</el-button>
          <el-button type="primary" @click="submitFormData">提交</el-button>
        </div>
      </div>
      <div class="config-list-add-edit">
        <el-button type="primary" @click="clickAddConfig">新增</el-button>
        <el-button type="primary" @click="clickEditConfig">编辑</el-button>
        <el-button type="primary" @click="clickDelConfig">删除</el-button>
      </div>
      <c-table-box ref="taskTonfigTable" index no-request checkbox :data="tableData" :selected-arry.sync="tableSelected" :other-filters="otherFilters" :table-config="tableConfig" @selection-change="selectionChange" />
      <!-- <div class="config-list-submit">
        <el-button type="primary" @click="clickPrevStep">保存并返回上一步</el-button>
        <el-button type="primary">提交</el-button>
      </div> -->
    </div>
    <div>
      <add-config v-if="showAddConfig" ref="relevanceDrawing" :visible.sync="showAddConfig" :detail-data="activedData" @goBack="showAddConfigPage" @success="refreshTable" />
    </div>
  </div>
</template>

<script>
import addConfig from './addConfig.vue'
import { submitAllocationTask, delConfigTable, queryConfigSheet } from '@/api/proConfig'
export default {
  name: 'ConfigList',
  components: { addConfig },
  props: {
    detailData: {
      type: [String, Object],
      default: ''
    },
    flag: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      percode: '',
      loading: false,
      showAddConfig: false,
      activedData: {},
      tableData: [],
      otherFilters: [],
      tableConfig: {
        // interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/productConfigSheet/page`,
        hideFuncBar: true,
        pageSize: 10,
        tablePage: [10, 20, 30, 50, 100],
        // apiHeader: { 'Permission-Percode': 'productconfigtask', 'Permission-App': 'slm' },
        setting: [
          {
            prop: 'configCode',
            label: '产品配置单号'
          },
          {
            prop: 'source',
            label: '任务来源',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'PRODUCT_CONFIG_TASK_SOURCE'
            }
          },
          {
            prop: 'picTaskCode',
            label: '来源图纸任务号'
          },
          {
            prop: 'picTaskName',
            label: '图纸名称'
          },
          {
            prop: 'proConfigType',
            label: '产品配置类型',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'PRO_CONFIG_TYPE'
            }
          },
          {
            prop: 'classDetail',
            label: '产品分类明细'
          },
          {
            prop: 'constCode',
            label: '门店建设项目号'
          },
          {
            prop: 'shopName',
            label: '所属门店'
          },
          {
            prop: 'officeName',
            label: '所属办事处'
          },
          // {
          //   prop: '10',
          //   label: '样品切换批次号'
          // },
          {
            prop: 'proConfiguratorName',
            label: '产品配置人员'
          }
        ]
      }
    }
  },
  created() {
    const formData = this.detailData
    if (formData.proConfigType === 'FINISHED') {
      this.percode = 'productconfigfinished'
    } else if (formData.proConfigType === 'CUSTOMIZE') {
      this.percode = 'customization'
    } else if (formData.proConfigType === 'MATCHED_FINISHED') {
      this.percode = 'environment'
    } else if (formData.proConfigType === 'SANITARY') {
      this.percode = 'bathroom'
    } else if (formData.proConfigType === 'ACCESSORY' || formData.proConfigType === 'RESOURCES') {
      this.percode = 'decoration'
    }
    this.otherFilters = [{ 'id': 'configTaskCode', 'property': 'configTaskCode', 'operator': '=', 'value': formData.configTaskCode }]
    const dataForm = new FormData()
    dataForm.append('page', 1)
    dataForm.append('rows', 10)
    dataForm.append('filtersRaw', JSON.stringify(this.otherFilters))
    queryConfigSheet(dataForm, this.percode).then(res => {
      if (res.success && res.data && res.data.records) {
        this.tableData = res.data.records
      }
    })
    // this.$nextTick(() => {
    //   this.$refs.taskTonfigTable.initTableData()
    // })
  },
  methods: {
    clickPrevStep() {
      if (!this.tableData.length) {
        this.$emit('goBack')
        return
      }
      this.$confirm('该操作将清空当前配置单，是否确认返回上一步', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const ids = this.tableData.map(item => item.id)
        delConfigTable(ids).then(res => {
          if (res.success) {
            this.$emit('goBack')
          }
        })
      })
      // this.$emit('goBack')
    },
    showAddConfigPage() {
      this.showAddConfig = false
      this.refreshTable()
    },
    selectionChange(data) {
      this.tableSelected = data
    },
    clickAddConfig() {
      this.showAddConfig = true
      this.activedData.formData = this.detailData
      this.activedData.type = 'add'
      // this.$router.push({ name: 'AddConfig', params: this.detailData })
    },
    clickEditConfig() {
      if (!this.tableSelected.length) {
        this.$message.warning('请选择【编辑】项')
        return
      }
      this.showAddConfig = true
      this.activedData.formData = this.detailData
      this.activedData.picData = this.tableSelected[0]
      this.activedData.type = 'edit'
    },
    // 删除
    clickDelConfig() {
      if (!this.tableSelected.length) {
        this.$message.warning('请选择【删除】项')
        return
      }
      this.$confirm('是否确认删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const ids = this.tableSelected.map(item => item.id)
        delConfigTable(ids).then(res => {
          if (res.success) {
            this.$message.success('操作成功')
            this.refreshTable()
          }
        })
      })
    },
    // 刷新
    refreshTable(isInit) {
      const dataForm = new FormData()
      dataForm.append('page', 1)
      dataForm.append('rows', 10)
      dataForm.append('filtersRaw', JSON.stringify(this.otherFilters))
      queryConfigSheet(dataForm, this.percode).then(res => {
        if (res.success && res.data && res.data.records) {
          this.tableData = res.data.records
        }
      })
    },
    submitFormData() {
      if (!this.tableData.length) {
        this.$message.warning('当前无配置单数据，无法提交')
        return
      }
      this.loading = true
      this.detailData.schedule = 'C'
      submitAllocationTask(this.detailData).then(res => {
        if (res.success) {
          this.$message.success('操作成功')
          this.detailData = {}
          this.$store.dispatch('views/goBack')
        }
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.config-list{
  .config-list-add-edit{
    padding: 10px 0;
  }
  .config-list-submit{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
  }
}
</style>
